<template>
    <div class="sales-prediction">
      <div class="top">
        <span class="name">{{$t('salesPredicttion.salesPrediction')}}</span>
        <span style="font-size:16px;color:#ff5b00;margin-left:15px;">{{$t('salesPredicttion.PRC')}}</span>
        <span class="date">{{$t('salesPredicttion.dataUpdata')}} {{upDate}}</span>
      </div>
      <div class="echarts-part">
        <el-card style="margin:15px 0;">
          <div class="title">{{$t('salesPredicttion.revPrediction')}}（$K）</div>
          <div class="accuracyVal">{{$t('salesPredicttion.accuracy')}}:{{revNum}}</div>
          <div class="nodata" v-if="showNoData.revChart">No Data</div>
          <div class="revChart"></div>
        </el-card>
        <el-card>
          <div class="title">{{$t('salesPredicttion.caPrediction')}}</div>
          <div class="accuracyVal">{{$t('salesPredicttion.accuracy')}}:{{caNum}}</div>
          <div class="nodata" v-if="showNoData.caChart">No Data</div>
          <div class="caChart"></div>
        </el-card>
      </div>
    </div>
</template>

<script>
  import {mapGetters} from 'vuex'
    export default {
      name: "SalesPrediction",
      data(){
        return {
          echartsDom:{
            revChart: '',
            caChart: ''
          },
          showNoData:{
            revChart: false,
            caChart: false
          },
          upDate: '',
          revNum: '',
          caNum: '',
        }
      },
      computed: {
        ...mapGetters(['sidebar'])
      },
      watch: {
        'sidebar.opened': function () {
          this.echartsResize()
        },
      },
      methods:{
        loadEchartsDom(){
          this.echarts.revChart = this.echarts.init(document.getElementsByClassName('revChart')[0],null,{renderer:'canvas'})
          this.echarts.caChart = this.echarts.init(document.getElementsByClassName('caChart')[0],null,{renderer:'canvas'})
        },
         async getDataRevChart(){
          let res = await this.axios.post('salesprediction/rev', {})
           // console.log(res,'空对空')
           let resData = res.data.data
           let xData = resData.month
           let solidDatas = resData.rev
           let dashedDatas = resData.rev_pred
           let solidData = [],solidDataNull = [],dashedData = []
           for(let i in solidDatas) {
             if (solidDatas[i] != null) {
               solidData.push(solidDatas[i].toFixed(2))
             } else{
               solidDataNull.push(solidDatas[solidDatas.indexOf(null)])
             }
           }
           for(let j in dashedDatas) {
             dashedData.push(dashedDatas[j].toFixed(2))
           }
           let legendData = ['Rev', 'Rev Prediction']
           this.revNum = resData.rev_acc
           this.upDate = resData.update_time

          this.drawLineMix(xData,solidData.concat(solidDataNull),dashedData,'#FFBF53','#04B1C2',this.echarts.revChart,'revChart', legendData)
        },
        async getDataCaChart(){
          let res = await this.axios.post('salesprediction/ca', {})
          let resData = res.data.data
          let xData = resData.month
          let solidData = resData.ca
          let dashedData = resData.ca_pred
          let legendData = ['CA', 'CA Prediction']
          this.caNum = resData.ca_acc
          this.drawLineMix(xData,solidData,dashedData, '#79B986','#E18169',this.echarts.caChart,'caChart', legendData)
        },
        drawLineMix(xData,solidData,dashedData,solidColor,dashedColor,echartsObj,noData, legendData){
          let option = {
            tooltip: {
              confine: true,
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              backgroundColor: 'rgba(255,255,255,1)',
              padding: [5, 10],
              textStyle: {
                color: '#7588E4'
              },
              extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
            },
            legend: {
              type: 'scroll',
              data: legendData,
            },
            grid: {
              left: '3%',
              right: '3%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                axisTick: {
                  show: false
                },
                axisLabel:{
                  // interval: 0, // 强制显示所有
                  // rotate: 45,
                  color: '#666',
                  fontSize: 12
                },
                axisLine: {
                  lineStyle:{
                    color: '#979797',
                    width: 3,
                  }
                },
                data: xData
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: '',
                axisLabel: {
                  show: false
                },
                splitLine: {
                  show: false,
                },
                axisTick: {
                  show: false
                },
                axisLine: {
                  lineStyle:{
                    color: '#979797'
                  }
                },
              }
            ],
            series: [
              {
                name:legendData[0],
                type:'line',
                lineStyle: {
                  type: 'solid',
                  width: 3,
                },
                smooth: true,
                data: solidData,
                itemStyle: {
                  normal: {
                    color: solidColor,
                  }
                }
              },
              {
                name:legendData[1],
                type:'line',
                smooth: true,
                lineStyle: {
                  type: 'dashed',
                  width: 3,
                },
                data: dashedData,
                itemStyle: {
                  normal: {
                    color: dashedColor
                  }
                }
              }
            ]
          }
          this.showNoData[noData] = false
          echartsObj.clear()
          echartsObj.setOption(option)
        },
        echartsResize(){
          setTimeout(() => {
            this.echarts.revChart.resize()
            this.echarts.caChart.resize()
          },200)
        }
      },
      mounted(){
        this.loadEchartsDom()
        this.getDataRevChart()
        this.getDataCaChart()
        window.onresize = () => {
          this.echartsResize()
        }
      }
    }
</script>

<style lang="scss" scoped>
  .sales-prediction{
    padding: 20px 46px;
    .top{
      .name{
        /*font-family: HelveticaNeue-CondensedBold;*/
        font-family: OpenSansShin;
        font-size: 20px;
        color: #FF5B00;
      }
      .date{
        margin-left:40px;
        font-family: HelveticaNeue;
        font-size: 16px;
        color: rgba(0,0,0,0.30);
      }
    }
    .echarts-part{
      overflow:hidden;
      .nodata{
        width: 100%;
        height: 100%;
        text-align:center;
        position: relative;
        top:100px;
        z-index:1;
      }
      .title{
        float:left;
        font-family: HelveticaNeue;
        font-size: 16px;
        color: #333333;
      }
      .accuracyVal{
        float:right;
        font-family: HelveticaNeue;
        font-size: 16px;
        color: #FF0000;
        display:none;
      }
      .revChart,.caChart{
        width:100%;
        height:35vh;
      }
    }
  }

</style>
